<template>
    <div class="app-container">
      <div style="padding:0 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="searchForm.currentPage"
          :page-sizes="[10,30,50,100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchForm.totalCount">
        </el-pagination>
      </div>
      <table class="_table" border="0" cellpadding="0" cellspacing="0" style="width: 100%" v-loading="loading.list">
        <thead>
        <tr>
          <th>id</th>
          <th>姓名</th>
          <th>角色</th>
          <th>修改日期</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, key) in list" :key="key">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td v-if="item.part_name !== null">{{item.part_name.part_name}}</td>
          <td v-else></td>
          <td>{{item.updated_at | parseTime}}</td>
          <td><el-button type="primary" @click="onDialogCheck(item)">角色分配</el-button></td>
        </tr>
        </tbody>
      </table>
      <div id="edit">
        <el-dialog title="角色分配" :visible.sync="dialogVisible" width="30%">
          <el-form :model="ruleForm" ref="ruleForm" label-width="70px">
            <el-form-item label="角色名称">
              <el-select
                v-model="ruleForm.part_id"
                filterable
                remote
                reserve-keyword
                placeholder="关键词搜索，空格表示全部"
                :remote-method="remoteMethod"
                :loading="loading.customers"
                style="width: 60%">
                <el-option
                  v-for="item in part"
                  :key="item.id"
                  :label="item.part_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="onSubmitForm">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
</template>

<script>
  import { getUsers, updateUser } from '../../api/user'
  import { parseTime } from '../../utils'
  import { getParts } from '../../api/part'
  import { replyRes } from '../../utils/res'

  export default {
    name: 'index',
    data() {
      return {
        dialogVisible: false,
        searchForm: {
          page: 1,
          pageSize: 10,
          totalCount: 0
        },
        ruleForm: {
          id: null,
          part_id: null
        },
        loading: {
          parts: false,
          users: false
        },
        part: {},
        list: {}
      }
    },
    filters: {
      parseTime: function(value) {
        if (!value) return ''
        value = value.toString()
        return parseTime(value, '{y}年{m}月{d}日')
      }
    },
    mounted() {
      this.fetchUsers()
    },
    methods: {
      fetchUsers() {
        getUsers(this.searchForm).then(res => {
          if (replyRes(res)) {
            this.list = res.data._items
            this.searchForm.totalCount = res.data._meta.totalCount
          }
        })
      },
      onDialogCheck(item) {
        this.ruleForm.id = item.id
        this.dialogVisible = true
      },
      onSubmitForm() {
        this.dialogVisible = false
        updateUser(this.ruleForm).then(res => {
          console.log(res)
          if (replyRes(res)) {
            this.fetchUsers()
          }
        })
      },
      // 一页多少行
      handleSizeChange(pageSize) {
        this.searchForm.pageSize = pageSize
        this.fetchUsers()
      },
      // 翻页
      handlePageChange(currentPage) {
        this.searchForm.page = currentPage
        this.fetchUsers()
      },
      /** 远程搜索客户列表方法 */
      remoteMethod(query) {
        this.loading.customers = true
        let params = {}
        if (query.trim() !== '') {
          params = { name: query.trim() }
        }
        getParts(params).then(res => {
          this.part = res.data._items
          this.loading.customers = false
        })
      }
    }
  }
</script>

<style scoped>

</style>
